<template>
  <section class="search-header-container">
    <el-row>
      <el-col
        class="link-wrap"
        :span="searchItems.length ? searchBtnWidth : 24"
        v-if="searchBtns.length"
      >
        <template v-for="(link, linkIndex) in searchBtns">
          <!-- 按钮 -->
          <el-link
            :key="linkIndex"
            :underline="false"
            @click="handleEvents(link)"
            >{{ link.name }}
          </el-link>
        </template>
      </el-col>
      <el-col
        class="search-wrap"
        :span="searchBtns.length ? 24 - searchBtnWidth : 24"
        v-if="searchItems.length"
      >
        <template v-for="(item, index) in searchItems">
          <div
            class="search-item-wrap"
            :class="params.senior ? '' : item.class"
            :key="index"
            v-if="hiddenFn(item, params)"
          >
            <!-- 文字展示 -->
            <template v-if="item.type === 'text'">
              <span class="el-checkbox__label" v-if="item.label">{{
                item.label
              }}</span>
            </template>
            <!-- 级联选择框 -->
            <template v-if="item.type === 'cascader'">
              <span class="label" v-if="item.label">{{ item.label }}</span>
              <el-cascader
                ref="cascader"
                size="small"
                :props="item.props"
                v-model="params[item.value]"
                popper-class="jee-border"
                v-bind="item"
                :clearable="item.clearable || false"
                @change="handleChangeCascader($event, item)"
                :show-all-levels="false"
              ></el-cascader>
            </template>
            <!-- 下拉框 -->
            <template v-else-if="item.type === 'select'">
              <span class="label" v-if="item.label">{{ item.label }}</span>
              <el-select
                :style="item.style"
                size="small"
                :clearable="item.clearable || false"
                :popper-class="'jee-border ' + item.popperClass"
                :placeholder="item.placeholder || '请选择'"
                v-model="params[item.value]"
                @change="handleSearch($event)"
              >
                <el-option
                  v-for="option in item.options || []"
                  :key="option[item.optionValue || 'value']"
                  :label="option[item.optionLabel || 'label']"
                  :value="option[item.optionValue || 'value']"
                >
                </el-option>
              </el-select>
            </template>
            <!-- 输入框 -->
            <template v-else-if="item.type === 'input'">
              <span class="label" v-if="item.label">{{ item.label }}</span>
              <el-input
                :style="item.style"
                class="t-input"
                :maxlength="item.maxlength"
                v-model="params[item.value]"
                @keyup.enter.native="handleSearch($event)"
                size="small"
                :placeholder="item.placeholder"
              >
              </el-input>
              <span v-if="item.suffix" class="suffix">{{ item.suffix }}</span>
            </template>
            <!-- 多选下拉框 -->
            <template v-else-if="item.type === 'checkboxInput'">
              <span class="label" v-if="item.label">{{ item.label }}</span>
              <el-select
                @change="handleSearch($event)"
                :style="item.style"
                popper-class="jee-border"
                class="t-input"
                v-model="params[item.value]"
                size="small"
                multiple
                collapse-tags
                :placeholder="item.placeholder"
              >
                <el-option
                  v-for="items in item.options"
                  :key="items[item.optionValue || 'value']"
                  :label="items[item.optionLabel || 'label']"
                  :value="items[item.optionValue || 'value']"
                >
                </el-option>
              </el-select>
              <span v-if="item.suffix" class="suffix">{{ item.suffix }}</span>
            </template>
            <!-- 多选框 -->
            <template v-else-if="item.type === 'checked'">
              <el-checkbox
                v-model="params[item.value]"
                @change="handleSearch($event)"
                >{{ item.label }}</el-checkbox
              >
            </template>
            <!-- 输入搜索框 -->
            <template v-else-if="item.type === 'searchInput'">
              <span class="label" v-if="item.label">{{ item.label }}</span>
              <el-input
                class="jee-input-append-select"
                v-model="params[item.value]"
                :maxlength="item.maxlength || 50"
                @keyup.enter.native="handleSearch($event)"
                size="small"
                :placeholder="item.placeholder"
                :style="item.style || { width: item.width + 'px' || 'auto' }"
                :clearable="item.clearable || false"
              >
                <el-select
                  v-if="item.isSelect"
                  class="input-prepend"
                  popper-class="jee-border"
                  v-model="params[item.selectProp]"
                  slot="prepend"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="items in item.options"
                    :key="items[item.optionValue || 'value']"
                    :label="items[item.optionLabel || 'label']"
                    :value="items[item.optionValue || 'value']"
                  >
                  </el-option>
                </el-select>
                <el-button
                  slot="append"
                  v-if="item.append === '0' ? false : true"
                  size="small"
                  class="jee-bg-light-important"
                  type="primary"
                  @click="handleSearch($event)"
                >
                  <i class="el-icon-download" style="fill: #ffffff"></i>
                </el-button>
              </el-input>
            </template>
            <!-- 时间选择器 -->
            <template v-else-if="item.type === 'timePicker'">
              <span class="label" v-if="item.label">{{ item.label }}</span>
              <div class="block">
                <el-date-picker
                  :style="item.style"
                  size="small"
                  :type="item.dateType || 'datetimerange'"
                  clearable
                  @change="handleSearch($event)"
                  :is-range="item.isRange || true"
                  v-model="params[item.value]"
                  :picker-options="item.pickerOptions"
                  :value-format="item.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
                  :placeholder="item.placeholder || '选择时间'"
                  :range-separator="item.rangeText || '至'"
                  :start-placeholder="item.startText || '开始时间'"
                  :disabled="item.disabled"
                  :end-placeholder="item.endText || '结束时间'"
                >
                </el-date-picker>
              </div>
            </template>
            <!-- 日期选择器 -->
            <template v-else-if="item.type === 'dataPicker'">
              <span class="label" v-if="item.label">{{ item.label }}</span>
              <div class="block">
                <el-date-picker
                  :style="item.style"
                  size="small"
                  type="daterange"
                  clearable
                  @focus="handleFocus($event)"
                  @change="handleSearch($event)"
                  :is-range="item.isRange || true"
                  v-model="params[item.value]"
                  value-format="yyyy-MM-dd"
                  :range-separator="item.rangeText || '至'"
                  :start-placeholder="item.startText || '开始日期'"
                  :end-placeholder="item.endText || '结束日期'"
                  :picker-options="item.pickerOptions"
                  :disabled="item.disabled"
                >
                </el-date-picker>
              </div>
            </template>
            <!-- 按钮 -->
            <template v-else-if="item.type === 'henderBtn'">
              <el-link
                :key="index"
                :underline="false"
                :disabled="item.disabled"
                class="jee-hover-fill"
                :class="item.class"
                @click="handleEvent(item)"
              >
                <el-tooltip
                  :content="item.title"
                  placement="bottom"
                  effect="light"
                >
                  {item.text}}
                </el-tooltip>
              </el-link>
            </template>
            <!-- 按钮 -->
            <template v-else-if="item.type === 'henderBtns'">
              <el-button
                :type="item.btnType || 'empty'"
                size="small"
                :disabled="item.disabled"
                @click="handleEvent(item)"
              >
                {{ item.text }}</el-button
              >
            </template>
            <!-- 按钮组 -->
            <template v-else-if="item.type === 'henderBorderBtn'">
              <el-button
                :key="index"
                :underline="false"
                :disabled="item.disabled"
                type="primary"
                size="small"
                class="search-button"
                @click="handleBtn(item.btnType, item)"
              >
                {{ item.text }}
              </el-button>
            </template>
            <!-- 更多搜索 -->
            <template v-else-if="item.type === 'senior'">
              <el-button
                size="small"
                :style="item.style || { minWidth: '70px', padding: '8px' }"
                :class="item.btnClass"
                @click="handleClickSenior(item)"
                type="primary"
                >{{
                  params[item.value]
                    ? item.hideText || "收起"
                    : item.openText || "高级搜索..."
                }}</el-button
              >
            </template>
            <!-- 切换按钮 -->
            <template v-else-if="item.type === 'cutButton'">
              <span class="label" v-if="item.label">{{ item.label }}</span>
              <el-radio-group
                class="jee-radio-group"
                size="small"
                v-model="params[item.value]"
                @change="handleSearch($event)"
              >
                <el-radio-button
                  popper-class="jee-border"
                  v-for="option in item.options || []"
                  :key="option[item.optionValue || 'value']"
                  :label="option[item.optionValue || 'value']"
                >
                  {{ option[item.optionLabel || "label"] }}
                </el-radio-button>
              </el-radio-group>
            </template>
            <template v-else-if="item.type === 'slot'">
              <slot></slot>
            </template>
          </div>
        </template>
      </el-col>
    </el-row>
  </section>
</template>

<script>
export default {
  name: "searchHeader",
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: () => ({}),
    },
    searchBtns: {
      type: Array,
      default: () => [],
    },
    searchBtnWidth: {
      type: Number,
      default: 10,
    },
    searchItems: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    handleClickSenior(item) {
      this.$set(this.params, item.value, !this.params[item.value]);
      this.$emit("handleSenior", this.params, item);
    },
    handleChangeCascader(e, item) {
      this.$refs.cascader[0].dropDownVisible = false;
      this.handleSearch(e, item);
    },
    handleSearch(e, item) {
      if (item && item.callback) {
        this.$emit(`handleSearch${item.callback}`, e, item);
      } else {
        this.$emit("handleSearch", e);
      }
    },
    handleFocus(e, item) {
      this.$emit("handleFocus", e);
    },
    hiddenFn(item, form) {
      var status = true;
      if (item.hiddenKey) {
        status = form[item.hiddenKey] === item.hiddenValue;
      } else if (item.hiddenKeys && item.hiddenKeys instanceof Array) {
        item.hiddenKeys.forEach((v, i) => {
          if (form[v] !== item.hiddenValues[i]) {
            status = false;
          }
        });
      } else if (item.hidden instanceof Function) {
        status = item.hidden(form);
      }
      return status;
    },
    handleEvent(item) {
      this.$emit("handleBtn", item);
    },
    handleEvents(item) {
      this.$emit("handleBtnAll", item);
    },
    handleBtn(btnType, item) {
      this.$emit(`handleBtn${btnType}`, item);
    },
  },
};
</script>

<style lang="scss">
.search-header-container {
  padding-bottom: 12px;
  .el-row {
    border-radius: 4px;
    min-height: 46px;
    overflow: hidden;
    padding: 10px 20px 0 0;
    background-color: #f0f0f0;
    .el-link {
      margin-left: 40px;
      line-height: 32px;
      .jee-svg-icon {
        fill: #666666;
        margin-right: 10px;
      }
      &:first-of-type {
        margin-left: 20px;
      }
    }
  }
  .el-col {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .search-item-wrap {
      line-height: 32px;
      margin-left: 20px;
      padding-bottom: 10px;
      display: flex;
      align-items: center;
      .label {
        padding-right: 10px;
        color: #666666;
        font-size: 14px;
        white-space: nowrap;
      }
      > .el-select {
        min-width: 100px;
        .el-input--small {
          line-height: 32px;
        }
      }
      > .el-input {
        min-width: 200px;
        .input-prepend {
          width: 102px;
          background-color: #fff;
          border: 1px solid #e8e8e8;
          box-sizing: border-box;
          border-left: none;
          border-right: none;
          height: 32px;
          position: relative;
          top: 1px;
          border-radius: 4px 0 0 4px;
          .el-input {
            height: 32px;
            &__inner {
              border: none;
            }
          }
        }
      }
    }
  }
  .suffix {
    margin-left: 10px;
    font-size: 14px;
    color: rgba(102, 102, 102, 1);
  }
  .link-icon {
    fill: #787878;
  }
  .el-button.el-button--small.search-button {
    padding: 8px 20px;
  }
  .jee-radio-group {
    .el-radio-button__inner {
      padding: 8px 15px;
      font-size: 14px;
      min-width: 80px;
    }
  }
}
</style>
